<template>
    <el-select
        v-model="model"
        :remote-method="queryList"
        :loading="loading"
        :placeholder="$t('common.pla.pleaseSelect')"
        :disabled="disabled"
        :multiplelimit="multiplelimit"
        :size="size"
        :multiple="multiple"
        :value-key="valueKey"
        :filterable="filterable"
        remote
        reserve-keyword
        style="width: 100%;"
        @change="handleChange"
    >
        <el-option
            v-for="item in teacherList"
            :key="item.teacherCode"
            :label="item.teacherName + '('+item.teacherCode+')' + item.facultyI18n "
            :value="getValue(item)"
        ></el-option>
    </el-select>
</template>
<script>
import UTILS from "common/src/utils/utils";
import APIs from "common/src/api/welcomeService/tutorList";

/**
 *courseCode下拉框组件
 */
export default {
    name: "TutorSelect",
    model: {
        prop: "model",
        event: "change"
    },
    props: {
        model: {
            default: null,
            validator: function(value) {
                // v-model不能为null
                const valide = value !== null && value !== undefined;
                if (!valide) {
                    console.warn("v-model不能为null");
                }
                return valide;
            }
        }, // 父组件通过v-model传过来, 如果传来的值为null为出现 Cannot read property 'some' of null
        valueKey: {
            type: String,
            default: "id"
        },
        value: null,
        multiple: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: true
        },
        size: {
            type: String,
            default: ""
        },
        multiplelimit: {
            type: Number,
            default: 0
        },
        conditionNotNull: {
            // 如果为false则会在查询条件有值时才查询数据
            type: Boolean,
            default: true
        },
        condition: {
            type: Object,
            default: null
        },
        major: {
            type: String,
            default: ""
        },
        type: {
            type: String,
            default: ""
        },
        tutorGrade: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            teacherList: [],
            loading: false
        };
    },
    mounted() {
        this.init();
    },
    created() {},
    watch: {
        condition: {
            deep: true,
            handler: function(newVal, oldVal) {
                this.init();
            }
        }
    },
    methods: {
        handleChange(val) {
            this.$emit("change", val);
        },
        getValue(item) {
            if (UTILS.isEmpty(this.value)) {
                return item;
            }
            return item[this.value];
        },
        init() {
            if (this.conditionNotNull && UTILS.isEmpty(this.condition)) {
                return;
            }
            let queryData = UTILS.clone(
                this.condition == null ? {} : this.condition
            );
            if (
                _.isNull(queryData.pageSize_) ||
                _.isUndefined(queryData.pageSize_)
            ) {
                queryData.pageSize_ = 50;
            }
            if (
                _.isNull(queryData.pageNum_) ||
                _.isUndefined(queryData.pageNum_)
            ) {
                queryData.pageNum_ = 1;
            }
            queryData.condition.type = this.type;
            queryData.condition.major = this.major;
            if (this.type == 1) {
                queryData.condition.tutorGrade = this.tutorGrade;
            }
            APIs.findTutor(queryData).then(res => {
                this.loading = false;
                this.teacherList = res.data.list;
            });
        },
        queryList(query) {
            this.loading = true;
            if (UTILS.isEmpty(this.condition)) {
                this.condition = {};
            }
            this.condition.condition.condition = query;
            this.init();
        }
    }
};
</script>

<style scoped>
</style>
